<template>
  <div class="img-preview">
    <el-image
      style="width: 1px; height: 1px"
      :src="url"
      ref="myImg"
      :preview-src-list="srcList"
      v-if="flag"
    >
    </el-image>
  </div>
</template>
<script>
import Bus from '@/utils/bus.js'
export default {
  data() {
    return {
      flag: true,
      url: '',
      srcList: [],
    }
  },
  created() {
    let previewDom = document.querySelector('.img-preview')
    this.flag = previewDom == null
  },
  mounted() {
    Bus.$on('showDialogimgPreview', (v, arr) => {
      if (arr && arr.length) {
        this.lookImageArr(v, arr)
      } else {
        this.lookImage(v)
      }
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogimgPreview')
  },
  methods: {
    lookImage(row) {
      this.srcList = []
      let curImg = row.httpUrl
      if (!curImg) return
      this.srcList.push(curImg)
      setTimeout(() => {
        if (!this.flag) return
        this.$refs.myImg.showViewer = true
      })
    },
    lookImageArr(row, imagArr) {
      this.srcList = []
      let curImg = row.httpUrl
      let arr = imagArr.map((v) => v.httpUrl)
      let idx = arr.indexOf(curImg)
      let newArr = arr.splice(idx)
      this.srcList.push(...newArr, ...arr)
      setTimeout(() => {
        if (!this.flag) return
        this.$refs.myImg.showViewer = true
      })
    },
  },
}
</script>
<style scoped>
.img-preview {
  height: 0;
  overflow: hidden;
}
</style>